<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style type="text/css">
        ul{margin:0;padding:0;display:inline-block;border-bottom:1px solid #ccc;width:600px;}
        ul li{list-style:none;float:left;padding:10px 25px;border-radius:3px 3px 0 0;border:1px solid transparent;margin-bottom:-1px;cursor:pointer;color:#999;}
        ul li:not(:first-child){margin-left: 15px}
        ul li.active{border-bottom:1px solid white;border-top:1px solid #ccc;border-left:1px solid #ccc;border-right:1px solid #ccc;color:#333;}
        ul li:hover{border-bottom:1px solid white;border-top:1px solid #ccc;border-left:1px solid #ccc;border-right:1px solid #ccc;color:#333}
        div{width: 200px;height:120px;border;display:none;}
        div.active{display:block}
    </style>
</head>
<body>
    <ul>
        <li data-todo="php" class="menu active">php</li>
        <li data-todo="web" class="menu">前端</li>
        <li data-todo="ui" class="menu">UI</li>
    </ul>
    <div id="php" class="item active">
        <ol>
            <li>php的基础构成是什么</li>
            <li>php有什么优势</li>
            <li>php大方向</li>
        </ol>
    </div>
    <div id="web" class="item">
        <ol>
            <li>web的基础构成是什么</li>
            <li>web有什么优势</li>
            <li>web大方向</li>
        </ol>
    </div>
    <div id="ui" class="item">
        <ol>
            <li>ui的基础构成是什么</li>
            <li>ui有什么优势</li>
            <li>ui大方向</li>
        </ol>
    </div>
    <script type="text/javascript">
        var li = document.getElementsByClassName('menu');
        for(var i = 0; i < li.length; i++) {
            li[i].onclick = function() {
                
                hide();
                this.className = 'menu active';
                document.getElementById(this.getAttribute('data-todo')).className = 'item active'
            }
        }
        function hide() {
            var item = document.getElementsByClassName('item');
            for(var i = 0; i < item.length; i++) {
                item[i].className = 'item';
            }
            var li = document.getElementsByClassName('menu');
            for(var i = 0; i < li.length; i++) {
                li[i].className = 'menu';
            }
        }
    </script>
</body>
</html>